<template>
  <div>
    <el-dialog
      v-dialogDrag
      title="新增合作商Logo"
      :visible="addShow"
      width="40%"
      @close="dialogClose"
    >
      <el-form ref="addForm" label-width="auto">
        <el-form-item label="上传图片：" prop="file">
          <el-upload
            list-type="picture-card"
            accept=".jpg, .png"
            action="#"
            :limit="1"
            :auto-upload="false"
            :file-list="fileList"
            :http-request="httpRequest"
            ref="upload"
            :on-change="handleChange"
            :class="{ hide_box: upload_btn }"
          >
            <i slot="default" class="el-icon-plus" :show-file-list="false"></i>
            <!-- <img v-if="logourl" class="avatar"> -->
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" width="30%" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="合作商名称：" prop="partnername">
          <el-input type="text" v-model="formFileds.partnername"></el-input>
        </el-form-item>
        <el-form-item label="跳转路径：" prop="jump">
          <el-input
            type="text"
            v-model="formFileds.jump"
            placeholder="http://... 或 https://..."
          >
          </el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input type="textarea" v-model="formFileds.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm()"
            class="pull-right margin-l-25"
            >确定
          </el-button>
          <el-button @click="dialogClose" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { add } from "@/api/systemManage/logoManage";
export default {
  name: "logoAdd",
  //接受父组件
  props: {
    addShow: {
      type: Boolean,
    },
  },

  data() {
    return {
      upload_btn: false,
      formFileds: {},
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    httpRequest(params) {
      // console.log("上传的文件++" + JSON.stringify(params.file))
      let formData = new FormData();
      formData.append("file", params.file);
      formData.append("partnername", this.formFileds.partnername);
      formData.append("jump", this.formFileds.jump);
      formData.append("remark", this.formFileds.remark);
      // console.log('上传结果：', JSON.stringify(formData));
      add(formData).then((res) => {
        this.$message.success("上传成功！");
      });
    },
    handleChange(file) {
      this.upload_btn = true;
    },
    handleRemove(file) {
      // console.log(file);
      this.upload_btn = false;
      this.$refs.upload.clearFiles();
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    dialogClose() {
      this.$emit("dialogClose");
    },
    submitForm() {
      this.$refs.upload.submit();
      /* add(formData).then((res) => {
       this.$message.success('添加成功！') })  */
    },
  },
};
</script>

<style lang="less" scoped>
:deep .el-dialog__header {
  display: none;
}

/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 146px;
  height: 146px;
  object-fit: contain;
  display: block;
}

.hide_box /deep/ .el-upload--picture-card {
  display: none;
}
</style>